<template>
  <el-tooltip
    ref="tooltipRef"
    :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }"
    :virtual-ref="lineClampTipConfig.triggerRef"
    virtual-triggering
    popper-class="singleton-tooltip"
    placement="top"
    :content="lineClampTipConfig.content"
    :visible="lineClampTipConfig.value"
  />
</template>
<script>
export default {
  name: 'LineClampTip',
  components: {},
  inject: ['busEvent', 'tableIsInit'],
  data() {
    return {
      lineClampTipConfig: {
        // 是否显示
        value: false,
        // 显示内容
        content: '',
        // 移入移出的事件响应时间  ms
        triggerEventTimeRange: 100,
        // 定时器
        triggerTimeout: null,
        // 显示的ref
        triggerRef: null
      }
    }
  },
  watch: {
    tableIsInit: {
      deep: true,
      handler(init) {
        if (!init.value) { return }
        // 获取 tip实例
        this.busEvent.value.off('cell-content-mouse-enter')
        this.busEvent.value.off('cell-content-mouse-leave')
        this.busEvent.value.on('cell-content-mouse-enter', ({ event, columnConfig }) => {
          this.lineClampTipCellEnter({ event, columnConfig })
        })
        this.busEvent.value.on('cell-content-mouse-leave', ({ event, columnConfig }) => {
          this.lineClampTipCellLeave({ event, columnConfig })
        })
      }
    }
  },
  methods: {
    // lineclmaptip 进入
    lineClampTipCellEnter({ event, columnConfig }) {
      if (!columnConfig.lineClamp || !columnConfig.lineClampTip || !this.lineClampTipConfig) {
        return
      }
      //
      const cellDom = event.target
      const cellDomText = cellDom.innerText
      // 单行文本溢出
      if (columnConfig.lineClamp === 1 && cellDomText) {
        const range = document.createRange()
        range.setStart(cellDom, 0)
        range.setEnd(cellDom, cellDom.childNodes.length)
        const rangeWidth = range.getBoundingClientRect().width
        const cellDomComputedsTyle = getComputedStyle(cellDom)
        const padding = (parseInt(cellDomComputedsTyle.paddingLeft, 10) || 0) +
          (parseInt(cellDomComputedsTyle.paddingRight, 10) || 0)

        if ((rangeWidth + padding > cellDom.offsetWidth || cellDom.scrollWidth > cellDom.offsetWidth)) {
          this.lineClampTipShow(cellDom)
        }
      } else if (columnConfig.lineClamp >= 2 && cellDomText) {
        // 多行文本溢出显示
        // 文本节点是否存在
        const cellDomComputedsTyle = getComputedStyle(cellDom)
        const cellDomHeight = parseInt(cellDomComputedsTyle.height)
        const diffDom = cellDom.children[0]
        // 高度对比
        const diffDomHeight = parseInt(diffDom.offsetHeight)
        // 对比高度
        if (diffDomHeight > cellDomHeight) {
          this.lineClampTipShow(cellDom)
        }
      }
    },
    // lineclmaptip 离开
    lineClampTipCellLeave({ event, columnConfig }) {
      if (!columnConfig.lineClamp || !columnConfig.lineClampTip || !this.lineClampTipConfig) {
        return
      }
      if (this.lineClampTipConfig.triggerTimeout !== null) {
        clearTimeout(this.lineClampTipConfig.triggerTimeout)
        this.lineClampTipConfig.triggerTimeout = null
      }
      this.lineClampTipHide()
    },
    // lineclmaptip 显示
    lineClampTipShow(cellDom) {
      if (!cellDom) {
        return
      }
      this.lineClampTipConfig.triggerTimeout = setTimeout(() => {
        this.lineClampTipConfig.content = cellDom.innerText
        this.lineClampTipConfig.triggerRef = cellDom
        this.lineClampTipConfig.value = true
      }, this.lineClampTipConfig.triggerEventTimeRange)
    },
    // lineclmaptip 隐藏
    lineClampTipHide() {
      this.lineClampTipConfig.value = false
      this.lineClampTipConfig.triggerRef = ''
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
